<template>    
  <view class="container">    
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">    
      <swiper-item v-for="(item, index) in swiperList" :key="index" @click="navigateToStore(index)">    
        <image :src="item.image" class="slide-image" mode="aspectFill" @click.stop="navigateToStore(index)"></image>    
      </swiper-item>    
    </swiper>    
    <view class="category-buttons">    
      <navigator v-for="(category, index) in categoryList" :url="category.url" :key="index" class="category-button">    
        <image class="category-icon" :src="category.icon" mode="aspectFit"></image>    
        <text class="category-text">{{ category.text }}</text>    
      </navigator>    
    </view> 
	<!-- 商家列表滚动视图 -->  
    <scroll-view scroll-y="true" class="shop-list" scroll-with-animation>  
        <view v-for="(shop, index) in shops" :key="index" class="shop-item"> 
            <view class="shop-image">  
                <image :src="shop.logo" mode="aspectFit" class="logo-img" />  
            </view>  
			<view class="shop-name-container">
			    <text class="shop-name">{{ shop.name }}</text>  
			</view>
            <view class="shop-info"> 
                <text class="shop-rating">评分: {{ shop.rating }}</text>  
                <!-- 其他信息，如距离、起送价等 -->  
            </view>  
        </view>  
    </scroll-view>  
  </view>    
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [  
				                {image: '/static/icons/pic1.png', storeUrl: '/pages/shop/shop'},  
				                {image: '/static/icons/pic2.png'},  
				                {image: '/static/icons/pic3.png'}  
				            ]  ,
				categoryList: [  
								{ text: '主食', url: '/pages/food/food', icon: '/static/icons/food.png' },  
								{ text: '饮品', url: '/pages/drink/drink', icon: '/static/icons/drink.png' },
								{ text: '小吃甜点', url: '/pages/snake/snake', icon: '/static/icons/snake.png' },
								{ text: '汉堡披萨', url: '/pages/hamburg/hamburg', icon: '/static/icons/hamburg.png' },
								],
				shops: [
				    {  
				        name: '商家1', 
				        logo: '/static/icons/shop1.jpg',  
				        rating: '4.8', 
				    },  
				    {  
				        name: '商家2', 
				        logo: '/static/icons/shop2.jpg',  
				        rating: '4.5', 
				    }, 
					{
					    name: '商家3', 
					    logo: '/static/icons/shop3.jpg',  
					    rating: '4.3', 
					}, 
					{
					    name: '商家4', 
					    logo: '/static/icons/shop4.jpg',  
					    rating: '4.5', 
					}, 
					{
					    name: '商家5', 
					    logo: '/static/icons/shop5.jpg',  
					    rating: '4.6', 
					}, 
				] 
			}
			 
		},
		onLoad() {

		},
		methods: {
			navigateToStore(index) {
			    uni.navigateTo({  
			        url: this.swiperList[index].storeUrl  
			    });  
			}  
		}
	}
</script>

<style>
	.container {  
	  display: flex;  
	  flex-direction: column;  
	  align-items: center;  
	  padding: 0rpx;  
	}  
	  
	.swiper {    
	  width: 100%;    
	  height: 300rpx;    
	}   
	  
	.slide-image {  
	  width: 100%;  
	  height: 100%;  
	}  
	  
	.category-buttons {  
	  display: flex;  
	  flex-wrap: wrap; /* 允许内容换行 */  
	  justify-content: space-around; /* 子元素水平方向平均分布 */  
	  padding: 20rpx 0; /* 上下内边距 */  
	}  
	  
	.category-button {  
	  display: flex;  
	  flex-direction: column;  
	  align-items: center;  
	  justify-content: center;  
	  margin: 40rpx; /* 外边距 */  
	}  
	
	.category-icon {  
	  width: 80rpx; /* 设置图标宽度 */  
	  height: 80rpx; /* 设置图标高度 */  
	  margin-bottom: 8rpx; /* 图标和文本之间的间距 */  
	}  
	
	.category-text {  
	  font-size: 24rpx; /* 文本大小 */  
	}
	
	.shop-list {
		width: 100%;
	  }
	
	.shop-item {
	    margin-bottom: 20rpx;
	    padding: 20rpx;
	    background-color: #f9f9f9;
	    border-radius: 20rpx;
		display: flex;
		align-items: center;
	  }
	
	  .shop-image {
	    margin-right: 20rpx;
	  }
	
	  .logo-img {
	    width: 150rpx;
	    height: 150rpx;
	    border-radius: 20%;
	  }
	
	.shop-info {   
	    flex-grow: 1;   
	    padding-left: 20rpx;
	} 
	.shop-name {
	    font-size: 28rpx;
	    font-weight: bold;
	}
	
	.shop-rating {
	    margin-top: 10rpx;
		color:#999;
	}
	  
</style>
